<template>
	<view class="index">
		<global-contact></global-contact>
		<view class="list">
			<view class="wrap">
				<image class="back" src="https://www.atuanjian.com/appletStatic/static/tip.png" mode="aspectFill"></image>
				<view class="item">
					<view class="left">
						<view class="tip">满减券</view>
						<view class="money">￥<text>60</text></view>
						<view class="des">满1000可用</view>
					</view>
					<view class="line"></view>
					<view class="right">
						<view class="top">
							<view class="info">
								<view class="title">团建专享券</view>
								<view class="time">2021.12.23-2021.12.25</view>
							</view>
							<view class="use">去使用</view>
						</view>
						<view class="descri">全平台使用</view>
					</view>
				</view>
			</view>
			<view class="wrap">
				<image class="back" src="https://www.atuanjian.com/appletStatic/static/tip.png" mode="aspectFill"></image>
				<view class="item">
					<view class="left">
						<view class="tip z">满减券</view>
						<view class="money"><text>8.5</text>折</view>
						<view class="des">满1000可用</view>
					</view>
					<view class="line"></view>
					<view class="right">
						<view class="top">
							<view class="info">
								<view class="title">团建专享券</view>
								<view class="time">2021.12.23-2021.12.25</view>
							</view>
							<view class="use">去使用</view>
						</view>
						<view class="descri">仅限团建使用</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.list{
		padding: 30rpx 30rpx 1rpx;
		.wrap{
			position: relative;
			margin-bottom: 30rpx;
			.back{
				width: 690rpx;
				height: 206rpx;
			}
			.item{
				// background-color: #FFFFFF;
				position: absolute;
				top: 0;
				left: 0;
				width: 690rpx;
				height: 206rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-flow: row nowrap;
				.left{
					width: 198rpx;
					height: 206rpx;
					font-size: 0;
					.tip{
						display: inline-block;
						padding: 0 8rpx;
						line-height: 32rpx;
						background: rgb(33, 102, 255);
						text-align: center;
						border-radius: 8rpx 0 16rpx 0;
						font-size: 16rpx;
						font-family: 苹方-简;
						font-weight: normal; 
						color: #FFFFFF;
						margin-bottom: 10rpx;
					}
					.z{
						background-color: #FE9328;
					}
					.money{
						text-align: center;
						font-size: 28rpx;
						font-family: DIN;
						font-weight: 500;
						line-height: 34rpx;
						color: #FF6F00;
						text{
							font-size: 70rpx;
							font-family: DIN;
							// font-weight: bold;
							line-height: 96rpx;
							color: #FF6F00;
							margin-bottom: 8rpx;
							display: inline-block;
							// vertical-align: bottom;
						}
					}
					.des{
						text-align: center;
						font-size: 22rpx;
						font-family: 苹方-简;
						font-weight: normal;
						line-height: 30rpx;
						color: #333333;
					}
				}
				.line{
					width: 0px;
					height: 164rpx; 
					border: 2rpx dashed #EBEBEB;
				}
				.right{
					width: 422rpx;
					padding: 32rpx 32rpx 22rpx 38rpx;
					.top{
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-flow: row nowrap;
						padding-bottom: 18rpx;
						border-bottom: 2rpx solid #F8F8F8;
						.info{
							.title{
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								line-height: 40rpx;
								color: #333333;
								margin-bottom: 16rpx;
							}
							.time{
								font-size: 22rpx;
								font-family: 苹方-简;
								font-weight: normal;
								line-height: 30rpx;
								color: #666666;
							}
						}
						.use{
							width: 132rpx;
							height: 56rpx;
							border: 2rpx solid #FFB850;
							text-align: center;
							line-height: 56rpx;
							border-radius: 28rpx;
							font-size: 24rpx;
							font-family: 苹方-简;
							font-weight: normal; 
							color: #FFB850;
						}
					}
					.descri{
						margin-top: 18rpx;
						font-size: 22rpx;
						font-family: 苹方-简;
						font-weight: normal;
						line-height: 30rpx;
						color: #666666;
					}
				}
			}
		}
	}
</style>
